
                <!--Page content-->
                <!--===================================================-->
                <div id="page-content">
                    
					<div class="panel">
					    <div class="eq-height clearfix">
					        <div class="col-md-4 eq-box-md text-center box-vmiddle-wrap bord-hor">
					
					            <!-- Simple Promotion Widget -->
					            <!--===================================================-->
					            <div class="box-vmiddle pad-all">
					                <h3 class="text-main">Register Today</h3>
					                <div class="pad-ver">
					                    <i class="demo-pli-bag-coins icon-5x"></i>
					                </div>
					                <p class="pad-btn text-sm">Members get <span class="text-lg text-bold text-main">50%</span> more points, so register today and start earning points for savings on great rewards!</p>
					                <br>
					                <a class="btn btn-lg btn-primary" href="#">Learn More...</a>
					            </div>
					            <!--===================================================-->
					
					        </div>
					        <div class="col-md-8 eq-box-md eq-no-panel">
					
					            <!-- Main Form Wizard -->
					            <!--===================================================-->
					            <div id="demo-main-wz">
					
					                <!--nav-->
					                <ul class="row wz-step wz-icon-bw wz-nav-off mar-top">
					                    <li class="col-xs-3">
					                        <a data-toggle="tab" href="#demo-main-tab1">
					                            <span class="text-danger"><i class="demo-pli-information icon-2x"></i></span>
					                            <p class="text-semibold mar-no">Account</p>
					                        </a>
					                    </li>
					                    <li class="col-xs-3">
					                        <a data-toggle="tab" href="#demo-main-tab2">
					                            <span class="text-warning"><i class="demo-pli-male icon-2x"></i></span>
					                            <p class="text-semibold mar-no">Profile</p>
					                        </a>
					                    </li>
					                    <li class="col-xs-3">
					                        <a data-toggle="tab" href="#demo-main-tab3">
					                            <span class="text-info"><i class="demo-pli-home icon-2x"></i></span>
					                            <p class="text-semibold mar-no">Address</p>
					                        </a>
					                    </li>
					                    <li class="col-xs-3">
					                        <a data-toggle="tab" href="#demo-main-tab4">
					                            <span class="text-success"><i class="demo-pli-medal-2 icon-2x"></i></span>
					                            <p class="text-semibold mar-no">Finish</p>
					                        </a>
					                    </li>
					                </ul>
					
					                <!--progress bar-->
					                <div class="progress progress-xs">
					                    <div class="progress-bar progress-bar-primary"></div>
					                </div>
					
					
					                <!--form-->
					                <form class="form-horizontal">
					                    <div class="panel-body">
					                        <div class="tab-content">
					
					                            <!--First tab-->
					                            <div id="demo-main-tab1" class="tab-pane">
					                                <div class="form-group">
					                                    <label class="col-lg-2 control-label">Username</label>
					                                    <div class="col-lg-9">
					                                        <input type="text" class="form-control" name="username" placeholder="Username">
					                                    </div>
					                                </div>
					                                <div class="form-group">
					                                    <label class="col-lg-2 control-label">Email address</label>
					                                    <div class="col-lg-9">
					                                        <input type="email" class="form-control" name="email" placeholder="Email">
					                                    </div>
					                                </div>
					                                <div class="form-group">
					                                    <label class="col-lg-2 control-label">Password</label>
					                                    <div class="col-lg-9 pad-no">
					                                        <div class="clearfix">
					                                            <div class="col-lg-4">
					                                                <input type="password" class="form-control mar-btm" name="password" placeholder="Password">
					                                            </div>
					                                            <div class="col-lg-4 text-lg-right"><label class="control-label">Retype password</label></div>
					                                            <div class="col-lg-4"><input type="password" class="form-control" name="password2" placeholder="Retype password"></div>
					                                        </div>
					                                    </div>
					                                </div>
					                            </div>
					
					                            <!--Second tab-->
					                            <div id="demo-main-tab2" class="tab-pane fade">
					                                <div class="form-group">
					                                    <label class="col-lg-2 control-label">First name</label>
					                                    <div class="col-lg-9 pad-no">
					                                        <div class="clearfix">
					                                            <div class="col-lg-4">
					                                                <input type="text" placeholder="First name" name="firstName" class="form-control">
					                                            </div>
					                                            <div class="col-lg-4 text-lg-right"><label class="control-label">Last name</label></div>
					                                            <div class="col-lg-4"><input type="text" placeholder="Last name" name="lastName" class="form-control"></div>
					                                        </div>
					                                    </div>
					                                </div>
					                                <div class="form-group">
					                                    <label class="col-lg-2 control-label">Company</label>
					                                    <div class="col-lg-9">
					                                        <input type="text" placeholder="Company" name="company" class="form-control">
					                                    </div>
					                                </div>
					                                <div class="form-group">
					                                    <label class="col-lg-2 control-label">Member Type</label>
					                                    <div class="col-lg-9">
					                                        <div class="radio">
					                                            <input id="demo-radio-1" class="magic-radio" type="radio" name="memberType" value="free">
					                                            <label for="demo-radio-1">Free</label>
					
					                                            <input id="demo-radio-2" class="magic-radio" type="radio" name="memberType" value="personal">
					                                            <label for="demo-radio-2">Personal</label>
					
					                                            <input id="demo-radio-3" class="magic-radio" type="radio" name="memberType" value="bussines">
					                                            <label for="demo-radio-3">Bussiness</label>
					                                        </div>
					                                    </div>
					                                </div>
					                            </div>
					
					                            <!--Third tab-->
					                            <div id="demo-main-tab3" class="tab-pane">
					                                <div class="form-group">
					                                    <label class="col-lg-2 control-label">Phone Number</label>
					                                    <div class="col-lg-9">
					                                        <input type="text" placeholder="Phone number" name="phoneNumber" class="form-control">
					                                    </div>
					                                </div>
					                                <div class="form-group">
					                                    <label class="col-lg-2 control-label">Address</label>
					                                    <div class="col-lg-9">
					                                        <input type="text" placeholder="Address" name="address" class="form-control">
					                                    </div>
					                                </div>
					                                <div class="form-group">
					                                    <label class="col-lg-2 control-label">City</label>
					                                    <div class="col-lg-9 pad-no">
					                                        <div class="clearfix">
					                                            <div class="col-lg-5">
					                                                <input type="text" placeholder="City" name="city" class="form-control">
					                                            </div>
					                                            <div class="col-lg-3 text-lg-right"><label class="control-label">Poscode</label></div>
					                                            <div class="col-lg-4"><input type="text" placeholder="Poscode" name="poscode" class="form-control"></div>
					                                        </div>
					                                    </div>
					                                </div>
					                            </div>
					
					                            <!--Fourth tab-->
					                            <div id="demo-main-tab4" class="tab-pane">
					                                <div class="form-group">
					                                    <label class="col-lg-2 control-label">Bio</label>
					                                    <div class="col-lg-9">
					                                        <textarea placeholder="Tell us your story..." rows="4" name="bio" class="form-control"></textarea>
					                                    </div>
					                                </div>
					                                <div class="form-group">
					                                    <div class="col-lg-9 col-lg-offset-2">
					                                        <div class="checkbox">
					                                            <input id="demo-checkbox-1" class="magic-checkbox" type="checkbox" name="acceptTerms">
					                                            <label for="demo-checkbox-1"> Accept the terms and policies</label>
					                                        </div>
					                                    </div>
					                                </div>
					                            </div>
					                        </div>
					                    </div>
					
					
					                    <!--Footer buttons-->
					                    <div class="pull-right pad-rgt mar-btm">
					                        <button type="button" class="previous btn btn-primary">Previous</button>
					                        <button type="button" class="next btn btn-primary">Next</button>
					                        <button type="button" class="finish btn btn-success" disabled>Finish</button>
					                    </div>
					
					                </form>
					            </div>
					            <!--===================================================-->
					            <!-- End of Main Form Wizard -->
					
					        </div>
					    </div>
					</div>
					<div class="row">
					    <div class="col-lg-6">
					        <hr class="new-section-sm bord-no">
					        <h4 class="text-main pad-btm bord-btm">Classic Style</h4>
					        <div class="panel">
					
					            <!-- Classic Form Wizard -->
					            <!--===================================================-->
					            <div id="demo-cls-wz">
					
					                <!--Nav-->
					                <ul class="wz-nav-off wz-icon-inline">
					                    <li class="col-xs-3 bg-mint">
					                        <a data-toggle="tab" href="#demo-cls-tab1">
					                            <span class="icon-wrap icon-wrap-xs bg-trans-dark"><i class="demo-pli-information icon-lg"></i></span> Account
					                        </a>
					                    </li>
					                    <li class="col-xs-3 bg-mint">
					                        <a data-toggle="tab" href="#demo-cls-tab2">
					                            <span class="icon-wrap icon-wrap-xs bg-trans-dark"><i class="demo-pli-male icon-lg"></i></span> Profile
					                        </a>
					                    </li>
					                    <li class="col-xs-3 bg-mint">
					                        <a data-toggle="tab" href="#demo-cls-tab3">
					                            <span class="icon-wrap icon-wrap-xs bg-trans-dark"><i class="demo-pli-home icon-lg"></i></span> Address
					                        </a>
					                    </li>
					                    <li class="col-xs-3 bg-mint">
					                        <a data-toggle="tab" href="#demo-cls-tab4">
					                            <span class="icon-wrap icon-wrap-xs bg-trans-dark"><i class="demo-pli-medal-2 icon-lg"></i></span> Finish
					                        </a>
					                    </li>
					                </ul>
					
					                <!--Progress bar-->
					                <div class="progress progress-xs progress-striped active">
					                    <div class="progress-bar progress-bar-dark"></div>
					                </div>
					
					
					                <!--Form-->
					                <form class="form-horizontal mar-top">
					                    <div class="panel-body">
					                        <div class="tab-content">
					
					                            <!--First tab-->
					                            <div id="demo-cls-tab1" class="tab-pane">
					                                <div class="form-group">
					                                    <label class="col-lg-3 control-label">Username</label>
					                                    <div class="col-lg-7">
					                                        <input type="text" class="form-control" name="username" placeholder="Username">
					                                    </div>
					                                </div>
					                                <div class="form-group">
					                                    <label class="col-lg-3 control-label">Email address</label>
					                                    <div class="col-lg-7">
					                                        <input type="email" class="form-control" name="email" placeholder="Email">
					                                    </div>
					                                </div>
					                            </div>
					
					                            <!--Second tab-->
					                            <div id="demo-cls-tab2" class="tab-pane fade">
					                                <div class="form-group">
					                                    <label class="col-lg-3 control-label">First name</label>
					                                    <div class="col-lg-7">
					                                        <input type="text" placeholder="First name" name="firstName" class="form-control">
					                                    </div>
					                                </div>
					                                <div class="form-group">
					                                    <label class="col-lg-3 control-label">Last name</label>
					                                    <div class="col-lg-7">
					                                        <input type="text" placeholder="Last name" name="lastName" class="form-control">
					                                    </div>
					                                </div>
					                            </div>
					
					                            <!--Third tab-->
					                            <div id="demo-cls-tab3" class="tab-pane">
					                                <div class="form-group">
					                                    <label class="col-lg-3 control-label">Address</label>
					                                    <div class="col-lg-7">
					                                        <input type="text" placeholder="Address" name="address" class="form-control">
					                                    </div>
					                                </div>
					                                <div class="form-group">
					                                    <label class="col-lg-3 control-label">City</label>
					                                    <div class="col-lg-7">
					                                        <input type="text" placeholder="City" name="city" class="form-control">
					                                    </div>
					                                </div>
					                            </div>
					
					                            <!--Fourth tab-->
					                            <div id="demo-cls-tab4" class="tab-pane mar-btm">
					                                <h4>Thank you</h4>
					                                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
					                            </div>
					                        </div>
					                    </div>
					
					
					                    <!--Footer button-->
					                    <div class="panel-footer text-right">
					                        <div class="box-inline">
					                            <button type="button" class="previous btn btn-primary">Previous</button>
					                            <button type="button" class="next btn btn-primary">Next</button>
					                            <button type="button" class="finish btn btn-primary" disabled>Finish</button>
					                        </div>
					                    </div>
					                </form>
					            </div>
					            <!--===================================================-->
					            <!-- End Classic Form Wizard -->
					
					        </div>
					    </div>
					    <div class="col-lg-6">
					        <hr class="new-section-sm bord-no">
					        <h4 class="text-main pad-btm bord-btm">Bubble Numbers</h4>
					        <div class="panel">
					
					            <!-- Bubble Numbers Form Wizard -->
					            <!--===================================================-->
					            <div id="demo-step-wz">
					                <div class="wz-heading wz-w-label bg-info">
					
					                    <!--Progress bar-->
					                    <div class="progress progress-xs">
					                        <div style="width: 15%;" class="progress-bar progress-bar-dark"></div>
					                    </div>
					
					                    <!--Nav-->
					                    <ul class="wz-steps wz-icon-bw wz-nav-off text-lg">
					                        <li class="col-xs-3">
					                            <a data-toggle="tab" href="#demo-step-tab1">
					                                <span class="icon-wrap icon-wrap-xs icon-circle bg-gray mar-ver">
					                                    <span class="wz-icon icon-txt text-bold">1</span>
					                                    <i class="wz-icon-done demo-psi-like"></i>
					                                </span>
					                                <small class="wz-desc box-block text-semibold">Account</small>
					                            </a>
					                        </li>
					                        <li class="col-xs-3">
					                            <a data-toggle="tab" href="#demo-step-tab2">
					                                <span class="icon-wrap icon-wrap-xs icon-circle bg-gray mar-ver">
					                                    <span class="wz-icon icon-txt text-bold">2</span>
					                                    <i class="wz-icon-done demo-psi-like"></i>
					                                </span>
					                                <small class="wz-desc box-block text-semibold">Profile</small>
					                            </a>
					                        </li>
					                        <li class="col-xs-3">
					                            <a data-toggle="tab" href="#demo-step-tab3">
					                                <span class="icon-wrap icon-wrap-xs icon-circle bg-gray mar-ver">
					                                    <span class="wz-icon icon-txt text-bold">3</span>
					                                    <i class="wz-icon-done demo-psi-like"></i>
					                                </span>
					                                <small class="wz-desc box-block text-semibold">Address</small>
					                            </a>
					                        </li>
					                        <li class="col-xs-3">
					                            <a data-toggle="tab" href="#demo-step-tab4">
					                                <span class="icon-wrap icon-wrap-xs icon-circle bg-gray mar-ver">
					                                    <span class="wz-icon icon-txt text-bold">4</span>
					                                    <i class="wz-icon-done demo-psi-like"></i>
					                                </span>
					                                <small class="wz-desc box-block text-semibold">Finish</small>
					                            </a>
					                        </li>
					                    </ul>
					                </div>
					
					                <!--Form-->
					                <form class="form-horizontal">
					                    <div class="panel-body">
					                        <div class="tab-content">
					
					                            <!--First tab-->
					                            <div id="demo-step-tab1" class="tab-pane">
					                                <div class="form-group">
					                                    <label class="col-lg-3 control-label">Username</label>
					                                    <div class="col-lg-7">
					                                        <input type="text" class="form-control" name="username" placeholder="Username">
					                                    </div>
					                                </div>
					                                <div class="form-group">
					                                    <label class="col-lg-3 control-label">Email address</label>
					                                    <div class="col-lg-7">
					                                        <input type="email" class="form-control" name="email" placeholder="Email">
					                                    </div>
					                                </div>
					                            </div>
					
					                            <!--Second tab-->
					                            <div id="demo-step-tab2" class="tab-pane fade">
					                                <div class="form-group">
					                                    <label class="col-lg-3 control-label">First name</label>
					                                    <div class="col-lg-7">
					                                        <input type="text" placeholder="First name" name="firstName" class="form-control">
					                                    </div>
					                                </div>
					                                <div class="form-group">
					                                    <label class="col-lg-3 control-label">Last name</label>
					                                    <div class="col-lg-7">
					                                        <input type="text" placeholder="Last name" name="lastName" class="form-control">
					                                    </div>
					                                </div>
					                            </div>
					
					                            <!--Third tab-->
					                            <div id="demo-step-tab3" class="tab-pane">
					                                <div class="form-group">
					                                    <label class="col-lg-3 control-label">Phone Number</label>
					                                    <div class="col-lg-7">
					                                        <input type="text" placeholder="Phone number" name="phoneNumber" class="form-control">
					                                    </div>
					                                </div>
					                                <div class="form-group">
					                                    <label class="col-lg-3 control-label">Address</label>
					                                    <div class="col-lg-7">
					                                        <input type="text" placeholder="Address" name="address" class="form-control">
					                                    </div>
					                                </div>
					                            </div>
					
					                            <!--Fourth tab-->
					                            <div id="demo-step-tab4" class="tab-pane mar-btm text-center">
					                                <h4>Thank you</h4>
					                                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
					                            </div>
					                        </div>
					                    </div>
					
					                    <!--Footer button-->
					                    <div class="panel-footer text-right">
					                        <div class="box-inline">
					                            <button type="button" class="previous btn btn-info">Previous</button>
					                            <button type="button" class="next btn btn-info">Next</button>
					                            <button type="button" class="finish btn btn-info" disabled>Finish</button>
					                        </div>
					                    </div>
					                </form>
					            </div>
					            <!--===================================================-->
					            <!-- End Bubble Numbers Form Wizard -->
					
					        </div>
					    </div>
					</div>
					<div class="row">
					    <div class="col-lg-6">
					
					        <hr class="new-section-sm bord-no">
					        <h4 class="text-main pad-btm bord-btm">With Tooltip</h4>
					        <div class="panel">
					
					            <!-- Circular Form Wizard -->
					            <!--===================================================-->
					            <div id="demo-cir-wz">
					                <div class="wz-heading pad-ver">
					
					                    <!--Progress bar-->
					                    <div class="progress progress-xs progress-light-base">
					                        <div class="progress-bar progress-bar-primary"></div>
					                    </div>
					
					                    <!--Nav-->
					                    <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
					                    <ul class="wz-nav-off">
					                        <li class="col-xs-3">
					                            <a data-toggle="tab" href="#demo-cir-tab1" title="Account" class="add-tooltip">
					                                <div class="icon-wrap icon-wrap-sm bg-gray">
					                                    <i class="wz-icon demo-pli-information icon-lg"></i>
					                                    <i class="wz-icon-done demo-pli-like icon-lg"></i>
					                                </div>
					                            </a>
					                        </li>
					                        <li class="col-xs-3">
					                            <a data-toggle="tab" href="#demo-cir-tab2" title="Profile" class="add-tooltip">
					                                <div class="icon-wrap icon-wrap-sm bg-gray">
					                                    <i class="wz-icon demo-pli-male icon-lg"></i>
					                                    <i class="wz-icon-done demo-pli-like icon-lg"></i>
					                                </div>
					                            </a>
					                        </li>
					                        <li class="col-xs-3">
					                            <a data-toggle="tab" href="#demo-cir-tab3" title="Address" class="add-tooltip">
					                                <div class="icon-wrap icon-wrap-sm bg-gray">
					                                    <i class="wz-icon demo-pli-home icon-lg"></i>
					                                    <i class="wz-icon-done demo-pli-like icon-lg"></i>
					                                </div>
					                            </a>
					                        </li>
					                        <li class="col-xs-3">
					                            <a data-toggle="tab" href="#demo-cir-tab4" title="Finish" class="add-tooltip">
					                                <div class="icon-wrap icon-wrap-sm bg-gray">
					                                    <i class="wz-icon demo-pli-medal-2 icon-lg"></i>
					                                    <i class="wz-icon-done demo-pli-like icon-lg"></i>
					                                </div>
					                            </a>
					                        </li>
					                    </ul>
					                </div>
					
					                <!--Form-->
					                <form class="form-horizontal">
					                    <div class="panel-body">
					                        <div class="tab-content">
					
					                            <!--First tab-->
					                            <div id="demo-cir-tab1" class="tab-pane">
					                                <div class="form-group">
					                                    <label class="col-lg-3 control-label">Username</label>
					                                    <div class="col-lg-7">
					                                        <input type="text" class="form-control" name="username" placeholder="Username">
					                                    </div>
					                                </div>
					                                <div class="form-group">
					                                    <label class="col-lg-3 control-label">Email address</label>
					                                    <div class="col-lg-7">
					                                        <input type="email" class="form-control" name="email" placeholder="Email">
					                                    </div>
					                                </div>
					                            </div>
					
					                            <!--Second tab-->
					                            <div id="demo-cir-tab2" class="tab-pane fade">
					                                <div class="form-group">
					                                    <label class="col-lg-3 control-label">First name</label>
					                                    <div class="col-lg-7">
					                                        <input type="text" placeholder="First name" name="firstName" class="form-control">
					                                    </div>
					                                </div>
					                                <div class="form-group">
					                                    <label class="col-lg-3 control-label">Last name</label>
					                                    <div class="col-lg-7">
					                                        <input type="text" placeholder="Last name" name="lastName" class="form-control">
					                                    </div>
					                                </div>
					                            </div>
					
					                            <!--Third tab-->
					                            <div id="demo-cir-tab3" class="tab-pane">
					                                <div class="form-group">
					                                    <label class="col-lg-3 control-label">Phone Number</label>
					                                    <div class="col-lg-7">
					                                        <input type="text" placeholder="Phone number" name="phoneNumber" class="form-control">
					                                    </div>
					                                </div>
					                                <div class="form-group">
					                                    <label class="col-lg-3 control-label">Address</label>
					                                    <div class="col-lg-7">
					                                        <input type="text" placeholder="Address" name="address" class="form-control">
					                                    </div>
					                                </div>
					                            </div>
					
					                            <!--Fourth tab-->
					                            <div id="demo-cir-tab4" class="tab-pane  mar-btm text-center">
					                                <h4>Thank you</h4>
					                                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
					                            </div>
					
					                        </div>
					                    </div>
					
					                    <!--Footer button-->
					                    <div class="panel-footer text-right">
					                        <div class="box-inline">
					                            <button type="button" class="previous btn btn-primary">Previous</button>
					                            <button type="button" class="next btn btn-primary">Next</button>
					                            <button type="button" class="finish btn btn-warning" disabled>Finish</button>
					                        </div>
					                    </div>
					                </form>
					            </div>
					            <!--===================================================-->
					            <!-- End Circular Form Wizard -->
					
					        </div>
					    </div>
					    <div class="col-lg-6">
					
					        <hr class="new-section-sm bord-no">
					        <h4 class="text-main pad-btm bord-btm">With Validation</h4>
					        <div class="panel">
					
					            <!-- Form wizard with Validation -->
					            <!--===================================================-->
					            <div id="demo-bv-wz">
					                <div class="wz-heading pad-top">
					
					                    <!--Nav-->
					                    <ul class="row wz-step wz-icon-bw wz-nav-off mar-top">
					                        <li class="col-xs-3">
					                            <a data-toggle="tab" href="#demo-bv-tab1">
					                                <span class="text-danger"><i class="demo-pli-information icon-2x"></i></span>
					                                <p class="text-semibold mar-no">Account</p>
					                            </a>
					                        </li>
					                        <li class="col-xs-3">
					                            <a data-toggle="tab" href="#demo-bv-tab2">
					                                <span class="text-warning"><i class="demo-pli-male icon-2x"></i></span>
					                                <p class="text-semibold mar-no">Profile</p>
					                            </a>
					                        </li>
					                        <li class="col-xs-3">
					                            <a data-toggle="tab" href="#demo-bv-tab3">
					                                <span class="text-info"><i class="demo-pli-home icon-2x"></i></span>
					                                <p class="text-semibold mar-no">Address</p>
					                            </a>
					                        </li>
					                        <li class="col-xs-3">
					                            <a data-toggle="tab" href="#demo-bv-tab4">
					                                <span class="text-success"><i class="demo-pli-medal-2 icon-2x"></i></span>
					                                <p class="text-semibold mar-no">Finish</p>
					                            </a>
					                        </li>
					                    </ul>
					                </div>
					
					                <!--progress bar-->
					                <div class="progress progress-xs">
					                    <div class="progress-bar progress-bar-primary"></div>
					                </div>
					
					
					                <!--Form-->
					                <form id="demo-bv-wz-form" class="form-horizontal">
					                    <div class="panel-body">
					                        <div class="tab-content">
					
					                            <!--First tab-->
					                            <div id="demo-bv-tab1" class="tab-pane">
					                                <div class="form-group">
					                                    <label class="col-lg-3 control-label">Username</label>
					                                    <div class="col-lg-7">
					                                        <input type="text" class="form-control" name="username" placeholder="Username">
					                                    </div>
					                                </div>
					                                <div class="form-group">
					                                    <label class="col-lg-3 control-label">Email address</label>
					                                    <div class="col-lg-7">
					                                        <input type="email" class="form-control" name="email" placeholder="Email">
					                                    </div>
					                                </div>
					                            </div>
					
					                            <!--Second tab-->
					                            <div id="demo-bv-tab2" class="tab-pane fade">
					                                <div class="form-group">
					                                    <label class="col-lg-3 control-label">First name</label>
					                                    <div class="col-lg-7">
					                                        <input type="text" placeholder="First name" name="firstName" class="form-control">
					                                    </div>
					                                </div>
					                                <div class="form-group">
					                                    <label class="col-lg-3 control-label">Last name</label>
					                                    <div class="col-lg-7">
					                                        <input type="text" placeholder="Last name" name="lastName" class="form-control">
					                                    </div>
					                                </div>
					                            </div>
					
					                            <!--Third tab-->
					                            <div id="demo-bv-tab3" class="tab-pane">
					                                <div class="form-group">
					                                    <label class="col-lg-3 control-label">Phone Number</label>
					                                    <div class="col-lg-7">
					                                        <input type="text" placeholder="Phone number" name="phoneNumber" class="form-control">
					                                    </div>
					                                </div>
					                                <div class="form-group">
					                                    <label class="col-lg-3 control-label">Address</label>
					                                    <div class="col-lg-7">
					                                        <input type="text" placeholder="Phone number" name="address" class="form-control">
					                                    </div>
					                                </div>
					                            </div>
					
					                            <!--Fourth tab-->
					                            <div id="demo-bv-tab4" class="tab-pane  mar-btm text-center">
					                                <h4>Thank you</h4>
					                                <p class="text-muted">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
					                            </div>
					                        </div>
					                    </div>
					
					                    <!--Footer button-->
					                    <div class="panel-footer text-right">
					                        <div class="box-inline">
					                            <button type="button" class="previous btn btn-primary">Previous</button>
					                            <button type="button" class="next btn btn-primary">Next</button>
					                            <button type="button" class="finish btn btn-warning" disabled>Finish</button>
					                        </div>
					                    </div>
					                </form>
					            </div>
					            <!--===================================================-->
					            <!-- End Form wizard with Validation -->
					
					        </div>
					    </div>
					</div>
					
					
					
                </div>
                <!--===================================================-->
                <!--End page content-->
<script>

//Form-Wizard.js
//====================================================================
//This file should not be included in your project.
//This is just a sample how to initialize plugins or components.
//
//- ThemeOn.net -


$(document).ready(function() {



 // FORM WIZARD
 // =================================================================
 // Require Bootstrap Wizard
 // http://vadimg.com/twitter-bootstrap-wizard-example/
 // =================================================================


 // MAIN FORM WIZARD
 // =================================================================
 $('#demo-main-wz').bootstrapWizard({
     tabClass		: 'wz-steps',
     nextSelector	: '.next',
     previousSelector	: '.previous',
     onTabClick: function(tab, navigation, index) {
         return false;
     },
     onInit : function(){
         $('#demo-main-wz').find('.finish').hide().prop('disabled', true);
     },
     onTabShow: function(tab, navigation, index) {
         var $total = navigation.find('li').length;
         var $current = index+1;
         var $percent = ($current/$total) * 100;
         var wdt = 100/$total;
         var lft = wdt*index;

         $('#demo-main-wz').find('.progress-bar').css({width:wdt+'%',left:lft+"%", 'position':'relative', 'transition':'all .5s'});


         // If it's the last tab then hide the last button and show the finish instead
         if($current >= $total) {
             $('#demo-main-wz').find('.next').hide();
             $('#demo-main-wz').find('.finish').show();
             $('#demo-main-wz').find('.finish').prop('disabled', false);
         } else {
             $('#demo-main-wz').find('.next').show();
             $('#demo-main-wz').find('.finish').hide().prop('disabled', true);
         }
     }
 });




 // CLASSIC STYLE
 // =================================================================
 $('#demo-cls-wz').bootstrapWizard({
     tabClass		: 'wz-classic',
     nextSelector	: '.next',
     previousSelector	: '.previous',
     onTabClick: function(tab, navigation, index) {
         return false;
     },
     onInit : function(){
         $('#demo-cls-wz').find('.finish').hide().prop('disabled', true);
     },
     onTabShow: function(tab, navigation, index) {
         var $total = navigation.find('li').length;
         var $current = index+1;
         var $percent = ($current/$total) * 100;
         var wdt = 100/$total;
         var lft = wdt*index;
         $('#demo-cls-wz').find('.progress-bar').css({width:$percent+'%'});

         // If it's the last tab then hide the last button and show the finish instead
         if($current >= $total) {
             $('#demo-cls-wz').find('.next').hide();
             $('#demo-cls-wz').find('.finish').show();
             $('#demo-cls-wz').find('.finish').prop('disabled', false);
         } else {
             $('#demo-cls-wz').find('.next').show();
             $('#demo-cls-wz').find('.finish').hide().prop('disabled', true);
         }
     }
 });




 // BUBBLE NUMBERS
 // =================================================================
 $('#demo-step-wz').bootstrapWizard({
     tabClass		: 'wz-steps',
     nextSelector	: '.next',
     previousSelector	: '.previous',
     onTabClick: function(tab, navigation, index) {
         return false;
     },
     onInit : function(){
         $('#demo-step-wz').find('.finish').hide().prop('disabled', true);
     },
     onTabShow: function(tab, navigation, index) {
         var $total = navigation.find('li').length;
         var $current = index+1;
         var $percent = (index/$total) * 100;
         var wdt = 100/$total;
         var lft = wdt*index;
         var margin = (100/$total)/2;
         $('#demo-step-wz').find('.progress-bar').css({width:$percent+'%', 'margin': 0 + 'px ' + margin + '%'});


         // If it's the last tab then hide the last button and show the finish instead
         if($current >= $total) {
             $('#demo-step-wz').find('.next').hide();
             $('#demo-step-wz').find('.finish').show();
             $('#demo-step-wz').find('.finish').prop('disabled', false);
         } else {
             $('#demo-step-wz').find('.next').show();
             $('#demo-step-wz').find('.finish').hide().prop('disabled', true);
         }
     }
 });



 // FORM WIZARD WITH TOOLTIP
 // =================================================================
 $('#demo-cir-wz').bootstrapWizard({
     tabClass		    : 'wz-steps',
     nextSelector	    : '.next',
     previousSelector    : '.previous',
     onTabClick: function(tab, navigation, index) {
         return false;
     },
     onInit : function(){
         $('#demo-cir-wz').find('.finish').hide().prop('disabled', true);
     },
     onTabShow: function(tab, navigation, index) {
         var $total = navigation.find('li').length;
         var $current = index+1;
         var $percent = (index/$total) * 100;
         var margin = (100/$total)/2;
         $('#demo-cir-wz').find('.progress-bar').css({width:$percent+'%', 'margin': 0 + 'px ' + margin + '%'});

         navigation.find('li:eq('+index+') a').trigger('focus');


         // If it's the last tab then hide the last button and show the finish instead
         if($current >= $total) {
             $('#demo-cir-wz').find('.next').hide();
             $('#demo-cir-wz').find('.finish').show();
             $('#demo-cir-wz').find('.finish').prop('disabled', false);
         } else {
             $('#demo-cir-wz').find('.next').show();
             $('#demo-cir-wz').find('.finish').hide().prop('disabled', true);
         }
     }
 })




 // FORM WIZARD WITH VALIDATION
 // =================================================================
 $('#demo-bv-wz').bootstrapWizard({
     tabClass		    : 'wz-steps',
     nextSelector	    : '.next',
     previousSelector	: '.previous',
     onTabClick          : function(tab, navigation, index) {
         return false;
     },
     onInit : function(){
         $('#demo-bv-wz').find('.finish').hide().prop('disabled', true);
     },
     onTabShow: function(tab, navigation, index) {
         var $total = navigation.find('li').length;
         var $current = index+1;
         var $percent = ($current/$total) * 100;
         var wdt = 100/$total;
         var lft = wdt*index;

         $('#demo-bv-wz').find('.progress-bar').css({width:wdt+'%',left:lft+"%", 'position':'relative', 'transition':'all .5s'});

         // If it's the last tab then hide the last button and show the finish instead
         if($current >= $total) {
             $('#demo-bv-wz').find('.next').hide();
             $('#demo-bv-wz').find('.finish').show();
             $('#demo-bv-wz').find('.finish').prop('disabled', false);
         } else {
             $('#demo-bv-wz').find('.next').show();
             $('#demo-bv-wz').find('.finish').hide().prop('disabled', true);
         }
     },
     onNext: function(){
         isValid = null;
         $('#demo-bv-wz-form').bootstrapValidator('validate');


         if(isValid === false)return false;
     }
 });




 // FORM VALIDATION
 // =================================================================
 // Require Bootstrap Validator
 // http://bootstrapvalidator.com/
 // =================================================================

 var isValid;
 $('#demo-bv-wz-form').bootstrapValidator({
     message: 'This value is not valid',
     feedbackIcons: {
     valid: 'fa fa-check-circle fa-lg text-success',
     invalid: 'fa fa-times-circle fa-lg',
     validating: 'fa fa-refresh'
     },
     fields: {
     username: {
         message: 'The username is not valid',
         validators: {
             notEmpty: {
                 message: 'The username is required.'
             }
         }
     },
     email: {
         validators: {
             notEmpty: {
                 message: 'The email address is required and can\'t be empty'
             },
             emailAddress: {
                 message: 'The input is not a valid email address'
             }
         }
     },
     firstName: {
         validators: {
             notEmpty: {
                 message: 'The first name is required and cannot be empty'
             },
             regexp: {
                 regexp: /^[A-Z\s]+$/i,
                 message: 'The first name can only consist of alphabetical characters and spaces'
             }
         }
     },
     lastName: {
         validators: {
             notEmpty: {
                 message: 'The last name is required and cannot be empty'
             },
             regexp: {
                 regexp: /^[A-Z\s]+$/i,
                 message: 'The last name can only consist of alphabetical characters and spaces'
             }
         }
     },
     phoneNumber: {
         validators: {
             notEmpty: {
                 message: 'The phone number is required and cannot be empty'
             },
             digits: {
                 message: 'The value can contain only digits'
             }
         }
     },
     address: {
         validators: {
             notEmpty: {
                 message: 'The address is required'
             }
         }
     }
     }
 }).on('success.field.bv', function(e, data) {
     // $(e.target)  --> The field element
     // data.bv      --> The BootstrapValidator instance
     // data.field   --> The field name
     // data.element --> The field element

     var $parent = data.element.parents('.form-group');

     // Remove the has-success class
     $parent.removeClass('has-success');


     // Hide the success icon
     //$parent.find('.form-control-feedback[data-bv-icon-for="' + data.field + '"]').hide();
 }).on('error.form.bv', function(e) {
     isValid = false;
 });



});

</script>